<template>
    <view style="width: 750rpx;display: flex;flex-direction: column;align-items: center;">
        <view class="title">
            {{noteObj.title}}
        </view>
        <view class="createTime">
            <image class="icon" src="@/pages/shop/static/image/article_detail_icon_time.png" mode=""></image>
            {{noteObj.createTime}}
        </view>
        
        <view class="content" v-if="noteObj.isContent==false">
            <view class="nodes">
                <view class="node" v-for="(node, index) in noteObj.nodes" :key="node.id">
                   <textarea :disabled="true"
                        class="text" auto-height="true" maxlength="-1" v-if="node.type == 'text'"
                        :value="node.content">
                    </textarea>
                   
                    
                    <image class="image" v-if="node.type=='image'" :src="node.url">
                    </image>
                </view>
            </view>
        </view>
        <view class="content" v-else>
            <rich-text :nodes="noteObj.content"></rich-text>
        </view>
        
        <view class="viewContainer">
            <view class="left">
                <image class="icon" src="@/pages/shop/static/image/article_list_icon_liu.png" mode=""></image>
                {{noteObj.views}}
            </view>
        </view>
        
        <view class="" style="height: 150rpx;">
            
        </view>
        
        <share-button :backgroundBtn="'#5E9FFD'"
			@onShare="onShare"
        ></share-button>

        
    </view>
</template>

<script>
    import {
        mapState,
        mapMutations,
        mapActions
    } from 'vuex';
    const api = require("@/static/js/api.js")
    const utils = require("@/static/js/utils.js")
    let that = null
   
    let Article_Attribute = {
        Task: 1
    }
    export default {
        data() {
            return {
                sequence:0,
                noteId:"",
                noteObj: {
                    cover: "",
                    title: "",
                    nodes: [],
                    createTime: "",
                    scanCount: "",
                    content:"",
                    isContent:true,
                },
                articleAttribute: 0, //0普通文章  1任务文章
                shareObj:{
                    scene:"",
                    isShowBtn:false,
                }
            };
        },
        components: {
            
        },
        onLoad(options) {
            that = this;
         
            if (options.id&&options.id.length>0){
                that.noteId = options.id;
                that.getProjectNotesDetail(options.id)               
            }
        },

        methods:{
            setnoteObj(res){
                that.noteObj.cover = res.data.cover||"";
                that.noteObj.title = res.data.title||"";
                that.noteObj.views = res.data.pageViews||'0';
                that.noteObj.createTime = utils.formatTime(res.data.createTime, 'yyyy-MM-dd')
                
                if ((that.articleAttribute == Article_Attribute.Task)&&res.datas&&res.datas.scene){
                    that.shareObj.scene = JSON.parse(res.datas.scene);
                    that.shareObj.isShowBtn = true;
                }
                
                if(utils.isJSON(res.data.content)){
                    console.log(JSON.parse(res.data.content))   
                    that.noteObj.isContent = false                      
                    var list = JSON.parse(res.data.content)||[]; 
                    that.initNodes(list);
                }else{
                    that.noteObj.isContent = true;
                    that.noteObj.content = utils.replaceSpecialChar(res.data.content);
                }
				
				that.shareTitleMixins = that.noteObj.title;
				that.shareImageMixins = that.noteObj.cover;
            },

            

            
            getProjectNotesDetail(id){
                api.getProjectNotesDetail({                  
                    param: {
                        id: that.noteId,
                    }
                }).then(res => {
                    console.log(res)
                    if (res.success) {
                        that.setnoteObj(res);
                    }
                })              
            },
            obtainSequence() {
                this.sequence++;
                return this.sequence;
            },
            
            initNodes(initList) {
                var list = initList || [];
                if (Object.prototype.toString.call(list) != "[object Array]") {
                    throw new Error("数据格式不正确！")
                }
                var nodes = [];
                for (var i = 0; i < list.length; i++) {
                    var ele = list[i];
                    if (ele.type == "text") {
                        var node = {};
                        node.type = "text";
                        node.id = this.obtainSequence();
                        node.content = ele.content || "";
                        nodes.push(node);
                    } else if (ele.type == "image") {
                        var node = {};
                        node.type = "image";
                        node.id = this.obtainSequence();
            
                        node.url = ele.url || "";
                        nodes.push(node);
                    }
                }
                this.noteObj.nodes = nodes;
                this.trimNodes();
            },
            trimNodes() {
                var list = this.noteObj.nodes;
                var nodes = [];
                var temp = null;
                for (var i = 0; i < list.length; i++) {
                    var node = list[i];
                    if (node.type == "image") {
                        nodes.push(node);
                        temp = null;
                        continue;
                    }
                    if (!temp) {
                        temp = node;
                        nodes.push(temp);
                        continue;
                    }
                    if (node.type == "text") {
                        temp.content += node.content;
                    }
                }
                if (nodes.length == 0 || nodes[nodes.length - 1].type != "text") {
                    var node = {};
                    node.id = this.obtainSequence();
                    node.type = "text";
                    node.content = "";
                    nodes.push(node);
                }
                this.noteObj.nodes = nodes;
            },
        }
    }
</script>

<style lang="scss">
    .title{
        width: 700rpx;
        font-size: 40rpx;
        color: #121212;
        margin-top: 52rpx;
        margin-bottom: 30rpx;
    }
    .createTime{
        display: flex;
        align-items: center;
        width: 700rpx;
        margin-bottom: 66rpx;
        font-size: 26rpx;
        color: #ababab;
        .icon{
            width: 25rpx;
            height: 25rpx;
            margin-right: 15rpx;
        }
    }
    
   .content {
        width: 700rpx;
        display: flex;
        flex-direction: column;
        margin-bottom: 30rpx;
        .nodes {
            width: 100%;
            min-height: 300rpx;

            .node {
                width: 100%;
                position: relative;
                overflow: hidden;
                margin-bottom: 30rpx;
                .text {
                    width: 100%;
                    font-size: 30rpx;
                    color: #121212;
                }
            }
        }


        .image {
            width: 95%;
            border-radius: 20rpx;
        }
    }
    
    .line{
        width: 750rpx;
        height: 1px;
        background-color: #e3e3e3;
    }

    .viewContainer{
        width: 700rpx;
        height: 104rpx;
        background-color: #ffffff;
        display: flex;
        // justify-content: space-between;
        align-items: center;
        margin-bottom: 200rpx;
        .left{
            display: flex;
            align-items: center;
            font-size: 26rpx;
            color: #ababab;
            .icon{
                width: 33rpx;
                height: 33rpx;
                margin-right: 15rpx;
            }
        }
     
    }

</style>
